<#systemSituation globalInfo="${globalInfo}"/>

<!-- widget grid with search -->
<section>

    <!-- row -->
    <div class="row">

        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <div class="jarviswidget jarviswidget-color-blueDark" data-widget-editbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>

                    <h2>字典列表 </h2>

                </header>

                <div>

                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->

                    <div class="alert alert-block  search-alert">
                        <form id="query-form" action="" class="form-horizontal">
                            <header class="search-header">
                                <a class="close txt-color-greenLight search-action" href="javascript:"><i
                                        class="fa fa-hand-o-down"></i></a>
                                <h4 class="alert-heading">
                                    <i class="fa fa-search txt-color-greenLight search-title"></i>&nbsp;&nbsp;查询过滤
                                </h4>
                            </header>
                            <div class="search-div hide">

                                <fieldset>
                                    <legend>
                                    </legend>

                                    <div class="row" style="margin: 0 20px">

                                        <div class="col-sm-4">

                                            <div class="form-group" style="padding: 5px 25px">
                                                <div class="input-group" rel="tooltip" data-placement="top"
                                                     data-original-title="根据字典的类型进行查询">
                                                    <span class="input-group-addon"><i
                                                            class="fa fa-crosshairs"></i></span>
                                                    <select name="type" style="width:100%" class="select2">
                                                        <option value="" selected="">All Type</option>
                                                        <!--:
                                                            for(type in typeList!){
                                                        -->
                                                        <option value="${type}">${type}</option>
                                                        <!--:
                                                            }
                                                        -->
                                                    </select>
                                                </div>
                                            </div>

                                        </div>
                                        <div class="col-sm-4" style="padding: 5px 25px">

                                            <div class="input-group" rel="tooltip" data-placement="top"
                                                 data-original-title="字典的描述信息中包含的内容">
                                                <span class="input-group-addon"><i
                                                        class="fa fa-tag"></i></span>
                                                <input type="text" name="description" class="form-control" style="">
                                            </div>
                                        </div>

                                    </div>
                                </fieldset>

                                <div class="form-actions search-footer">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button type="button" name="query" class="btn btn-primary">
                                                <i class="fa fa-search"></i> 查询
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <script type="text/javascript">
                            $(function () {
                                var $form = $('#query-form');
                                $form.find('.search-action, .search-title').on('click', function () {
                                    var search_div = $form.find('.search-div');
                                    if (search_div.hasClass('hide')) {
                                        search_div.removeClass('hide');
                                        $form.find('.search-action').find('i').removeClass().addClass('fa fa-hand-o-left');
                                    } else {
                                        search_div.addClass('hide');
                                        $form.find('.search-action').find('i').removeClass().addClass('fa fa-hand-o-down');
                                    }
                                });
                            });
                        </script>
                    </div>

                    <!-- widget content -->
                    <div class="widget-body no-padding">
                        <div id="dictTable"></div>
                    </div>

                </div>
            </div>

        </article>
        <!-- WIDGET END -->
    </div>
    <!-- end row -->
</section>
<!-- end widget grid with search -->

<!-- dict form content -->
<div class="well dialog-well" id="dict-dialog" style="display: none;">

    <div class="widget-body no-padding">

        <form id="dict-form" action="${ctx}/sys/dict/save" method="post" class="smart-form">

            <fieldset>
                <div class="hide">
                    <input type="hidden" name="id"> 　
                </div>
                <div class="row">
                    <section class="col col-6">
                        <label class="label">键值</label>
                        <label class="input">
                            <i class="icon-append fa fa-key"></i>
                            <input type="text" name="value" placeholder="字典的键值">
                            <b class="tooltip tooltip-bottom-right">字典的key,必须设置</b>
                        </label>
                    </section>
                    <section class="col col-6">
                        <label class="label">标签</label>
                        <label class="input">
                            <i class="icon-append fa fa-info"></i>
                            <input type="text" name="label" placeholder="字典的标签">
                            <b class="tooltip tooltip-bottom-right">字典的显示值,必须设置</b>
                        </label>
                    </section>
                </div>

                <div class="row">
                    <section class="col col-6">
                        <label class="label">类型</label>
                        <label class="input">
                            <i class="icon-append fa fa-crosshairs"></i>
                            <input type="text" name="type" placeholder="字典的类型">
                            <b class="tooltip tooltip-bottom-right">通过设置字典类型,可以把字典归类</b>
                        </label>
                    </section>
                    <section class="col col-6">
                        <label class="label">排序</label>
                        <label class="input">
                            <i class="icon-append fa fa-sort-amount-asc"></i>
                            <input type="text" name="sort" placeholder="显示顺序">
                            <b class="tooltip tooltip-bottom-right">同类型的字典的显示顺序</b>
                        </label>
                    </section>
                </div>

                <section>
                    <label class="label">描述</label>
                    <label class="input">
                        <i class="icon-append fa fa-tag"></i>
                        <input type="text" name="description" placeholder="字典的描述信息">
                        <b class="tooltip tooltip-bottom-right">添加字典的描述信息,可以不指定</b>
                    </label>
                </section>

                <section>
                    <label class="label">备注信息</label>
                    <label class="textarea">
                        <i class="icon-append fa fa-comment"></i>
                        <textarea rows="4" name="remarks"></textarea>
                    </label>
                </section>

                <section>
                    <label class="checkbox"><input type="checkbox" name="fixed" value="1">
                        <i></i>锁定字典,不允许进行修改</label>
                </section>
            </fieldset>

        </form>

    </div>
</div>
<!-- end dict form content -->


<script type="text/javascript">

    /* DO NOT REMOVE : GLOBAL FUNCTIONS!
     *
     * pageSetUp(); WILL CALL THE FOLLOWING FUNCTIONS
     *
     * // activate tooltips
     * $("[rel=tooltip]").tooltip();
     *
     * // activate popovers
     * $("[rel=popover]").popover();
     *
     * // activate popovers with hover states
     * $("[rel=popover-hover]").popover({ trigger: "hover" });
     *
     * // activate inline charts
     * runAllCharts();
     *
     * // setup widgets
     * setup_widgets_desktop();
     *
     * // run form elements
     * runAllForms();
     *
     ********************************
     *
     * pageSetUp() is needed whenever you load a page.
     * It initializes and checks for all basic elements of the page
     * and makes rendering easier.
     *
     */
    pageSetUp();

    /*
     * ALL PAGE RELATED SCRIPTS CAN GO BELOW HERE
     */
    // PAGE RELATED SCRIPTS
    // pagefunction
    var pagefunction = function () {

        var params = {};
        var $dictFrom = $("#dict-form");
        var $queryFrom = $("#query-form");
        $dictFrom.validate({
            // Rules for form validation
            rules: {
                // 为了不污染html代码,验证统一在js中
                value: {
                    required: true,
                    maxlength: 10
                },
                label: {
                    required: true,
                    maxlength: 50
                },
                type: {
                    required: true,
                    maxlength: 30
                },
                sort: {
                    required: true,
                    digits: true,
                    maxlength: 6
                },
                description: {
                    maxlength: 100
                },
                remarks: {
                    maxlength: 250
                }
            },

            // Messages for form validation,use default
            messages: {
                // 不覆盖使用默认js多语言文件
            },
            submitHandler: function (form) {
                // 遮罩
                var loadIndex = parent.layer.load(0, {shade: 0.4});

                $(form).ajaxSubmit({
                    dataType: "json",
                    success: function (data) {
                        parent.layer.close(loadIndex);

                        if (data && data.status == 'success') {
                            // .dt-toolbar .dt_refresh .dt-refresh-btn
                            parent.$('#dictTable .dt-toolbar .dt-refresh-btn').trigger('click');
                            parent.messageBox(data.message, "success");
                        } else {
                            parent.messageBox(data.message, "error");
                        }
                        // 显示
                        parent.layer.closeAll('page');
                    },
                    error: function () {
                        parent.layer.close(loadIndex);
                        parent.messageBox("修改字典错误!", "error");
                    }
                });
                // always return false to prevent standard browser submit and page navigation
                return false;
            },
            // Do not change code below
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            }
        });

        var datatable = new DataTableData({
                    databind: $('#dictTable').get(0),
                    //数据请求url地址
                    dataurl: '${ctx}/sys/dict/list',
                    //数据请求参数
                    params: params,
                    hasCache: true,
                    hasCheck: true,
                    info: false,
                    checkBind: 'id',
                    toolbarStates: {
                        "add": {
                            action: function () {
                                form();
                            }
                        },
                        "edit": {
                            action: function () {
                                var selDatas = datatable.getSelectedDatas();
                                if (selDatas && selDatas.length > 0) {
                                    form(selDatas[0]);
                                }
                            }
                        },
                        "delete": {
                            action: function () {
                                var selDatas = datatable.getSelectedDatas();
                                if (selDatas && selDatas.length > 0) {
                                    var ids = [];
                                    for (var i = 0; i < selDatas.length; i++) {
                                        ids.push(selDatas[i]['id']);
                                    }
                                    layer.confirm('您真的要删除选择的数据？', {
                                                icon: 3,
                                                title: '删除字典',
                                                btn: ['确定', '取消'], //按钮
                                                shade: 0.4 //不显示遮罩
                                            }, function (index) {
                                                // send
                                                ajaxCoomand({
                                                    url: '${ctx}/sys/dict/deleteList',
                                                    data: {idList: ids},
                                                    callback: function () {
                                                        datatable.refresh();
                                                    }
                                                });

                                                layer.close(index);
                                            }
                                    );
                                }
                            }
                        }
                    },
                    columns: [
                        {
                            data: 'label', title: '标签',
                            render: function (value) {
                                return '<div class="text-center label label-default">' + value+ '</div>';
                            }
                        },
                        {
                            data: 'value', title: '键值',
                            render: function (value) {
                                return '<div class="text-center">' + value + '</div>';
                            }
                        },
                        {
                            data: 'type',
                            title: '类型',
                            render: function (data) {
                                var param = "'" + data + "'";
                                return '<a href="javascript:" onclick="filterByType(' + param + ')">' + data + '</a>';
                            }
                        },
                        {data: 'description', title: '描述'},
                        {data: 'sort', title: '排序'},
                        {
                            data: 'id',
                            title: '操作',
                            render: function (data, type, row) {
                                var param = "'" + row['type'] + "'" + ',' + row['sort'] + ',' + "'" + row['description'] + "'";
                                return '<a href="javascript:" class="btn btn-success" style="padding: 0 5px;" onclick="addByType(' + param + ')"><i class="fa fa-magic"></i> 添加键值</a>';
                            }
                        }
                    ]
                }
        );

        /**
         * 打开编辑框
         */
        function form(dict) {
            var opr = '添加';
            if (dict != null && !$.isEmptyObject(dict) && dict['id'] != null) {
                opr = "修改";
            }
            // 添加修改对话框
            layer.open({
                type: 1,
                title: opr + '字典',
                shadeClose: false,
                shade: 0.4,
                area: ['720px'],   //高度自动适应
                maxmin: true,
                content: $('#dict-dialog'),
                btn: ['确定', '取消'],
                success: function () {
                    // 当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引
                    // 这里可以通过发送ajax获取,也可通过表格选择时获取的行的值设置
                    if (dict != null && !$.isEmptyObject(dict)) {
                        if (dict['id'] != null) {
                            $dictFrom.find('input[name=id]').val(dict['id']);
                        }
                        $dictFrom.find('input[name=value]').val(dict['value']);
                        $dictFrom.find('input[name=label]').val(dict['label']);
                        $dictFrom.find('input[name=type]').val(dict['type']);
                        $dictFrom.find('input[name=sort]').val(dict['sort']);
                        $dictFrom.find('input[name=description]').val(dict['description']);
                        $dictFrom.find('textarea[name=remarks]').val(dict['remarks']);
                        if (dict['fixed'] == 1) {
                            $dictFrom.find('input[name=fixed]').prop('checked', 'checked');
                        }
                    }
                },
                end: function () {
                    // 无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数
                    $dictFrom.find('input[name=id]').val('');
                    $dictFrom.find('input[name=value]').val('');
                    $dictFrom.find('input[name=label]').val('');
                    $dictFrom.find('input[name=type]').val('');
                    $dictFrom.find('input[name=sort]').val('');
                    $dictFrom.find('input[name=description]').val('');
                    $dictFrom.find('textarea[name=remarks]').val('');
                    $dictFrom.find('input[name=fixed]').prop('checked', false);
                },
                yes: function () { //或者使用btn1
                    // 按钮【确定】的回调
                    $dictFrom.submit();
                },
                cancel: function (index) { //或者使用btn2
                    // 按钮【取消】的回调
                    layer.close(index);
                }
            });
        }

        /**
         * 类型按钮点击
         */
        function filterByType(type) {
            // 设置属性
            $queryFrom.find('select[name=type]').val(type).trigger("change");
            $queryFrom.find('input[name=description]').val('');
            $queryFrom.find('[name=query]').trigger('click');
        }

        /**
         * 添加按钮点击
         */
        function addByType(type, sort, description) {
            // 设置属性
            form({type: type, sort: sort, description: description});
        }

        // 注册
        window.filterByType = filterByType;
        window.addByType = addByType;

        // query
        $queryFrom.find('[name=query]').on('click', function () {
            params = {
                type: $queryFrom.find('select[name=type]').val(),
                description: $queryFrom.find('input[name=description]').val()
            };
            // 根据查询更新表
            datatable.refresh(params);
        });
    };

    // destroy generated instances
    // pagedestroy is called automatically before loading a new page
    // only usable in AJAX version!
    var pagedestroy = function () {
        // 移除注册方法
        window.filterByType = undefined;
        window.addByType = undefined;
    };
    // end destroy

    // load related plugins
    loadScript("/static/js/plugin/datatables/jquery.dataTables.js", function () {
        loadScript("/static/js/plugin/datatables/dataTables.colVis.js", function () {
            loadScript("/static/js/plugin/datatables/dataTables.tableTools.js", function () {
                loadScript("/static/js/plugin/datatables/dataTables.bootstrap.js", function () {
                    loadScript("/static/js/plugin/datatable-responsive/datatables.responsive.js", function () {

                        loadScript("/static/js/plugin/jquery-form/jquery.form.js");
                        loadScript("/static/js/extend/DataTableData.js", pagefunction);
                    });
                });
            });
        });
    });

</script>